<template>
  <el-select
    v-model="selectedExperiment"
    placeholder="请选择实验"
    clearable
    @change="handleExperimentChange"
  >
    <el-option
      v-for="item in experimentStore.experimentList"
      :key="item.experiment_id"
      :label="item.experiment_name"
      :value="item.experiment_id"
    />
  </el-select>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useExperimentStore } from '@/stores/experiment'

const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: ''
  }
})

const emit = defineEmits(['update:modelValue'])

const experimentStore = useExperimentStore()
const selectedExperiment = ref(props.modelValue)

// 监听外部值变化
watch(() => props.modelValue, (newVal) => {
  selectedExperiment.value = newVal
})

// 监听选择变化
const handleExperimentChange = (value) => {
  emit('update:modelValue', value)
}

onMounted(async () => {
  if (experimentStore.experimentList.length === 0) {
    await experimentStore.fetchExperimentList()
  }
})
</script> 